<template>
 <s-layout title="订单详情"  navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }" > 
		<view class="state-box ss-flex-col ss-col-center ss-row-right"   >
			<view class="ss-flex ss-m-t-32 ss-m-b-20">
				<view class="notice-box">
					<view class="notice-box__content">
						<view class="notice-item--center">
							<view class="ss-flex ss-flex-1">
								<text class="title">订单编号：</text>
								<text class="detail">{{ orderNumber }}</text>
							</view>
						</view>
						<view class="notice-item">
							<view class="ss-flex ss-flex-1">
								<text class="title">订单时间：</text>
								<text class="detail">{{ orderTime }}</text>
							</view>
						</view>
						<!-- 客户名称 -->
						<view class="notice-item">
							<view class="ss-flex ss-flex-1">
								<text class="title">客户：</text>
								<text class="detail">{{ customerName }}</text>
							</view>
						</view>
						<!-- 产品清单 -->
						<view class="product-list-header">
							<view>产品清单</view>
						</view>
						<view class="product-list">
							<view v-for="(product, index) in orderProducts" :key="index" class="product-item">
								<view class="product-item-row">
									<view>产品：</view>
									<view>{{ product.name }}</view>
								</view>
								<view class="product-item-row">
									<view>条码：</view>
									<view>{{ product.no }}</view>
								</view>
								<!-- <view class="product-item-row">
							<view>规格：</view>
							<view>{{ product.standard }}</view>
						</view> -->
								<view class="product-item-row">
									<view>库存：</view>
									<view>{{ product.stock }}</view>
								</view>
								<view class="product-item-row">
									<view>数量：</view>
									<view>{{ product.quantity }}</view>
								</view>
								<view class="product-item-row">
									<view>单价：</view>
									<view>{{ product.unitPrice }}</view>
								</view>
								<view class="product-item-row">
									<view>金额：</view>
									<view>{{ product.amount }}</view>
								</view>
								<view class="product-item-row">
									<view>税率：</view>
									<view>{{ product.taxPercent }}%</view>
								</view>
								<view class="product-item-row">
									<view>备注：</view>
									<view>{{ product.remark }}</view>
								</view>
							</view>
						</view>
						<!-- 定金金额 -->
						<view class="form-item">
							<view>定金金额(元)：</view>
							<view>{{ depositPrice }}</view>
						</view>
						<!-- 附件地址 -->
						<view class="form-item">
							<view>附件地址：</view>
							<view>{{ fileUrl }}</view>
						</view>

						<!-- 备注 -->
						<view class="form-item">
							<view>备注：</view>
							<view>{{ remark }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout> 
</template>

<script   > 
  import sheep from '@/sheep';  
	import {
		getOrderDetails
	} from "@/sheep/api/erp/order.js";
   
	export default {
		data() {
			return {
				orderId: "", // 从路由参数获取订单ID
				orderNumber: "",
				orderTime: "",
				customerName: "",
				depositPrice: 0,
				fileUrl: "",
				remark: "",
				orderProducts: [],
			};
		},

		methods: {
			fetchOrderDetails() {
				console.log('获取到的订单ID:=====' + this.orderId);
				getOrderDetails(this.orderId)
					.then((res) => {
						const order = res.data;
						this.orderNumber = order.no;
						this.orderTime = this.formatDate(new Date(order.orderTime)); // 格式化订单时间
						this.customerName = order.customerName || "未知客户"; // 客户名称为空时显示默认值
						this.depositPrice = order.depositPrice;
						this.fileUrl = order.fileUrl || "无附件";
						this.remark = order.remark || "无备注";

						// 映射产品数据
						this.orderProducts = order.items.map((item) => ({
							name: item.productNames,
							no: item.productBarCode,
							unitName: item.productUnitName,
							standard: item.standard,
							stock: item.stockCount,
							quantity: item.count,
							unitPrice: item.productPrice || 0, // 处理单价为空的情况
							amount: ((item.count || 0) * (item.productPrice || 0)).toFixed(2), // 计算金额
							taxPercent: item.taxPercent,
							remark: item.remark || "无备注",
						}));
					})
					.catch(() => {
						uni.showToast({
							title: "获取订单详情失败",
							icon: "none"
						});
					});
			},
			// 辅助函数：格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 当元素获得焦点时触发
			onFocus(event) {
				event.target.contentEditable = "true";
			},
			// 当元素失去焦点时触发
			onBlur(event) {
				event.target.contentEditable = "false";
			},
		},
		onLoad() {
			this.orderId = uni.getStorageSync('orderId');
			console.log('获取到的订单ID:', this.orderId);
			this.fetchOrderDetails();
		},
	};
</script>

<style lang="scss" scoped>
	.score-img {
		width: 36rpx;
		height: 36rpx;
		margin: 0 4rpx;
	}

	.apply-btn {
		width: 140rpx;
		height: 50rpx;
		border-radius: 25rpx;
		font-size: 24rpx;
		border: 2rpx solid #dcdcdc;
		line-height: normal;
		margin-left: 16rpx;
	}

	.state-box {
		color: rgba(#fff, 0.9);
		width: 100%;
		background:  
			linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		background-size: 750rpx 100%;
		box-sizing: border-box;

		.state-img {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}
	}

	.order-address-box {
		background-color: #fff;
		border-radius: 10rpx;
		margin: -50rpx 20rpx 16rpx 20rpx;
		padding: 44rpx 34rpx 42rpx 20rpx;
		font-size: 30rpx;
		box-sizing: border-box;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);

		.address-username {
			margin-right: 20rpx;
		}

		.address-detail {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			margin-top: 20rpx;
		}
	}

	.detail-goods {
		border-radius: 10rpx;
		margin: 0 20rpx 20rpx 20rpx;

		.order-list {
			margin-bottom: 20rpx;
			background-color: #fff;

			.order-card {
				padding: 20rpx 0;

				.order-sku {
					font-size: 24rpx;

					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					width: 450rpx;
					margin-bottom: 20rpx;

					.order-num {
						margin-right: 10rpx;
					}
				}

				.tag-btn {
					margin-left: 16rpx;
					font-size: 24rpx;
					height: 36rpx;
					color: var(--ui-BG-Main);
					border: 2rpx solid var(--ui-BG-Main);
					border-radius: 14rpx;
					padding: 0 4rpx;
				}
			}
		}
	}

	// 订单信息。
	.notice-box {
		background: #fff;
		border-radius: 10rpx;
		margin: 0 20rpx 20rpx 20rpx;

		.notice-box__head {
			font-size: 30rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 80rpx;
			border-bottom: 1rpx solid #dfdfdf;
			padding: 0 25rpx;
		}

		.notice-box__content {
			padding: 20rpx;

			.self-pickup-box {
				width: 100%;

				.self-pickup--img {
					width: 200rpx;
					height: 200rpx;
					margin: 40rpx 0;
				}
			}
		}

		.notice-item,
		.notice-item--center {
			display: flex;
			align-items: center;
			line-height: normal;
			margin-bottom: 24rpx;

			.title {
				font-size: 28rpx;
				color: #999;
			}

			.detail {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}
		}
	}

	.copy-btn {
		width: 100rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		padding: 0;
		background: rgba(238, 238, 238, 1);
		font-size: 22rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	// 订单价格信息
	.order-price-box {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin: 0 20rpx 20rpx 20rpx;

		.notice-item {
			line-height: 70rpx;

			.title {
				font-size: 28rpx;
				color: #999;
			}

			.detail {
				font-size: 28rpx;
				color: #333;
				font-family: OPPOSANS;
			}
		}

		.all-rpice-item {
			justify-content: flex-end;
			align-items: center;

			.title {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				line-height: normal;
			}

			.all-price {
				font-size: 26rpx;
				font-family: OPPOSANS;
				line-height: normal;
				color: $red;
			}
		}
	}

	// 底部
	.footer-box {
		height: 100rpx;
		width: 100%;
		box-sizing: border-box;
		border-radius: 10rpx;
		padding-right: 20rpx;

		.cancel-btn {
			width: 160rpx;
			height: 60rpx;
			background: #eeeeee;
			border-radius: 30rpx;
			margin-right: 20rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
		}

		.pay-btn {
			width: 160rpx;
			height: 60rpx;
			font-size: 26rpx;
			border-radius: 30rpx;
			font-weight: 500;
			color: #fff;
		}
	}
	
</style>